The Two.js canvas and D3 scales don't automatically update when the window is resized, causing visual elements to remain at incorrect positions.

Changes

• Added resize handler: Calls two.fit() on window resize to update canvas dimensions
• Added resize trigger: Introduced resizeTrigger variable to force reactive recalculation of D3 scales
• Updated reactive scales: Modified x and y scale declarations to depend on resizeTrigger

// Reactive scales now update on window resize
$: {
  void resizeTrigger; // Force reactive update when resizeTrigger changes
  x = d3
    .scaleLinear()
    .domain([0, 144])
    .range([0, twoElement?.clientWidth ?? 144]);
}

// Resize handler updates both canvas and triggers scale recalculation
const handleResize = () => {
  if (two) {
    two.fit();
    resizeTrigger++;
  }
};

The window resize event listener is added in onMount and cleaned up in onDestroy.

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.